import './DataQuery.scss';
import { useState, useEffect } from 'react';
import { Form, Input, Button, Select, Table, DatePicker } from '@arco-design/web-react';
import { geteDataquery,passDataquery,parkingDataquery } from '../../utils/api'
import { IconExclamationCircle } from '@arco-design/web-react/icon'
const FormItem = Form.Item;

const { RangePicker } = DatePicker;

const DataQuery = () => {
    const [inputFrom] = Form.useForm()
    //   //表格数据
    const [data, setData] = useState([])
    //表头数据
    const columns = [
        {
            title: '车牌号码',
            dataIndex: 'carNum',
            key: 'carNum'
        },
        {
            title: '识别方式',
            dataIndex: 'confirmType',
            key: 'confirmType',
            render: (confirmType) => <span>{confirmType == 1 ? 'ETC' : '视频识别'}</span>
        },
        {
            title: '方向',
            dataIndex: 'parkRecordId',
            key: 'parkRecordId',
            render: (parkRecordId) => <span>{parkRecordId == 1 ? '出场' : '入场'}</span>
        },
        {
            title: '停车场',
            dataIndex: 'parkingName',
            key: 'parkingName'
        },
        {
            title: '岗亭车道',
            dataIndex: 'passName',
            key: 'passName'
        },
        {
            title: '车辆类型',
            dataIndex: 'carType',
            key: 'carType',
            render: (carType) => <span>{carType == 1 ? '临时车' : '包月车'}</span>
        },
        {
            title: '车位号',
            dataIndex: 'parkingPalaceNum',
            key: 'parkingPalaceNum'
        },
        {
            title: '进场时间',
            dataIndex: 'entryTime',
            key: 'entryTime'
        },
        {
            title: '出场时间',
            dataIndex: 'outTime',
            key: 'outTime'
        },
        {
            title: '停车时长',
            dataIndex: 'duration',
            key: 'duration'
        },
        {
            title: '应收',
            dataIndex: 'payNum',
            key: 'payNum'
        },
        {
            title: '优惠',
            dataIndex: 'discountNum',
            key: 'discountNum'
        },
        {
            title: '实收',
            dataIndex: 'realityNum',
            key: 'realityNum'
        },
        {
            title: '支付方式',
            dataIndex: 'payType',
            key: 'payType',
            render: (payType) => <span>{payType == 1 ? 'ETC' : '银联'}</span>
        },
    ];
    //表格数据
    // const [data, sparkingApi] = useState([])


//发送请求获取数据
  const getdata = () => {
    geteDataquery().then((res) => {
      console.log(res.result);
      let tabledata = res.result
      setData(tabledata)

    })
  }
  const passdata = () => {
    passDataquery().then((res) => {
      console.log(res);
    })
  }

  const parkingdata = () => {
    parkingDataquery().then((res) => {
      console.log(res);
    })
  }

  useEffect(() => {
    getdata()
    passdata()
    parkingdata()
  }, [])
    //发送请求获取数据
    // const getdata = () => {
    //     geteDataquery().then((res) => {
    //         console.log(res);
    //     })
    // }
    // useEffect(() => {
    //     getdata()
    // }, [])

    // const parkingApi = () => {
    //     http({
    //       url: '/SuperAdmin/AllDataList',
    //       method: 'get'
    //     }).then((res) => {
    //       console.log(res);
    //       let tbaledata = res.data
    //       setData(tbaledata)
    //     })
    //   }

    const [checkStrictly] = useState(true);
    //查询按钮
    const queryBtn = () => {
        console.log('查询按钮');
        let a = inputFrom.getFieldsValue()
        console.log(a);
    }
    //重置按钮

    return <div className='equipment'>
        <div className='formBox'>
            <FormItem label="查询日期:" className='formboxtime'>
                <RangePicker />
            </FormItem>
            <FormItem label="车牌号码:" className='formboxnumber'>
                <Input />
            </FormItem>
            <Button type="primary" className='formboxbtnquery' onClick={queryBtn}>查询</Button>
            <Button className='formboxbtnreset'>重置</Button>
            <Form form={inputFrom} className='formBoxFrom' layout='inline' colon size='default'>
                <FormItem label='停车场' field='equipments'>
                    <Select
                        placeholder='请选择'
                        options={[
                            {
                                label: '停车场1',
                                value: 0,
                            },
                            {
                                label: '停车场2',
                                value: 1,
                            },
                            {
                                label: '停车场3',
                                value: 2,
                            },
                            {
                                label: '停车场4',
                                value: 3,
                            },
                        ]}
                        allowClear
                    />
                </FormItem>
                <FormItem label='进出场车道' field='equipment'>
                    <Select
                        placeholder='请选择'
                        options={[
                            {
                                label: 'one',
                                value: 0,
                            },
                            {
                                label: 'two',
                                value: 1,
                            },
                            {
                                label: 'three',
                                value: 2,
                            },
                        ]}
                        allowClear
                    />
                </FormItem>
                <FormItem label='识别方式' field='motion'>
                    <Select
                        placeholder='请选择'
                        options={[
                            {
                                label: 'ETC',
                                value: 0,
                            },
                            {
                                label: '视频识别',
                                value: 1,
                            },
                        ]}
                        allowClear
                    />
                </FormItem>
                <FormItem label='进出场' field='givealarm'>
                    <Select
                        placeholder='请选择'
                        options={[
                            {
                                label: 'one',
                                value: 0,
                            },
                            {
                                label: 'two',
                                value: 1,
                            },
                            {
                                label: 'three',
                                value: 2,
                            },
                        ]}
                        allowClear
                    />
                </FormItem>
                <FormItem label='停车位编号' field='position'>
                    <Select
                        placeholder='请选择'
                        options={[
                            {
                                label: 'one',
                                value: 0,
                            },
                            {
                                label: 'two',
                                value: 1,
                            },
                            {
                                label: 'three',
                                value: 2,
                            },
                        ]}
                        allowClear
                    />
                </FormItem>
                <FormItem label='支付方式' field='positions'>
                    <Select
                        placeholder='请选择'
                        options={[
                            {
                                label: 'ETC',
                                value: 1,
                            },
                            {
                                label: '微信支付',
                                value: 2,
                            },
                            {
                                label: '银联',
                                value: 3,
                            },
                            {
                                label: '支付宝',
                                value: 4,
                            },
                        ]}
                        allowClear
                    />
                </FormItem>
                <div className='exportbtn'>
                    <Button className='formboxbtnreset'>导出所选</Button>
                    <Button className='formboxbtnreset'>导出全部</Button>
                </div>
            </Form>

        </div>
        <div className='selectItem'>
            <p><span><IconExclamationCircle /></span>已选择<span>5</span>项   本次查询耗时：364 毫秒   <span>清空</span></p>
        </div>
        <Table
            rowKey={(record) => record.carNum}
            scroll={{ x: 2000 }}
            rowSelection={{
                type: 'checkbox',
                onChange: (selectedRowKeys, selectedRows) => {
                    console.log(selectedRowKeys, selectedRows);
                },
                checkStrictly,
            }}
            columns={columns}
            data={data}
            pagination={{
                pageItemStyle: { border: "1px solid #ccc", borderRadius: '5px' },
                activePageItemStyle: { backgroundColor: '#1890ff', color: '#fff' },
                sizeCanChange: true, showTotal: true,
                bufferSize: '2', size: 'size', pageSize: '4', options: 'large',
            }}
        />
    </div>
}
export default DataQuery
